import React, { memo, useEffect } from 'react';
import type { FC, ReactNode } from 'react';
import { MusiclibraryWrapper } from './style';
import { useAppDispatch, useAppSelector } from '@/store';
import { feachPlaylistDetailAction } from './store';
import { shallowEqual } from 'react-redux';
import MusicLover from './c-cpns/musicLover';
import MusicFooterTabs from './c-cpns/musicFooterTabs';

interface IProps {
  children?: ReactNode;
}

const MusicLibrary: FC<IProps> = () => {
  const { likedSongPlaylistID } = useAppSelector((state) => ({
    likedSongPlaylistID: state.login.likedSongPlaylistID,
    loginMode: state.login.loginMode
  }), shallowEqual)

  const dispatch = useAppDispatch()
  useEffect(() => {
    if (likedSongPlaylistID) {
      dispatch(feachPlaylistDetailAction({ id: likedSongPlaylistID }))
    }
  }, [dispatch, likedSongPlaylistID])

  const { tranks, allPlaylist } = useAppSelector((state) => ({
    tranks: state.musicLibrary.tracks,
    allPlaylist: state.musicLibrary.allPlaylist
  }), shallowEqual)

  return <MusiclibraryWrapper>
    <h1 className="music-user-header">
      <img className="user-cover" src='https://p1.music.126.net/ApMB3NNpaw0rS7s7cD639A==/109951168692438164.jpg?param=512y512' alt='用户头像' />
      九毛九大叔的音乐库
    </h1>
    {tranks && <MusicLover tranks={tranks} detail={allPlaylist?.[0]} />}
    <MusicFooterTabs />
  </MusiclibraryWrapper >;
};

export default memo(MusicLibrary);
